<template>
	<view style=""
		class="container-index">
		<view class="" :style="`position: absolute;top: 50rpx; left: 30rpx;right: 30rpx;`">
			<Cportrait ref="isdata" @changeLang="getdata"></Cportrait>
		<view class="tips">
			<tui-tips ref="toast" backgroundColor='rgba(0, 0, 0, 0.5)' :style="`margin-top:${statusBarHeight}px`"></tui-tips>
		</view>
		<!-- <view class="" v-if="isShow">
			<view :class="{animate:flag,energyItme:true}" v-for="(item,index) in energyList"
				:style="{top:item.top + 'rpx',left:item.left + 'rpx',animationDelay:item.times + 's'}">
				<image src="@/static/index/itemImg.png" mode=""></image>
			</view>
		</view> -->
		<!-- 通知 -->
		<view class="inform" v-if="newsList.length>0">
			<view class="inform-info">
				<view class="picture" @click="jump(`/pageB/news/news?type=0&name=${$t('user.name74')}`)">
					<image src="/static/newProject/gg_icon.png" mode=""></image>
				</view>
				<view class="info">
					<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false"
						:autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in newsList" :key="index">
							<view class="swiper-item"
								@click="jump(`/pageB/news/news?type=0&name=${$t('user.name74')}`)">
								<text class="one-omit">{{item.title}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		</view>
		<view class="dx">
			<view class="svga">
				<view class="content" style="">
					<l-svga src="/static/svga.svga"></l-svga>
					<image id="animationContainer" src="../../static/json/8c04ca0523b02492dbb1277babdc235.png" mode=""></image>
					<image id="animationContainer" class="img1" src="/static/json/1.png" mode=""></image>
					<image id="animationContainer" class="img2" src="/static/json/2.png" mode="" style="width: 268rpx;height: 268rpx;top: 85px;"></image>
				</view>
			</view>
			<view class="flex-between" style="">
				<view class="">
					<view class="notice" style="width: 120rpx;height: 100rpx;"
						@tap="$fun.jump(`/pageC/statistics/statistics?title=${$t('home.name1')}&type=1`)">
						<image class="imgicon" src="@/static/lr/l1.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName">{{$t('home.name1')}}</view>
					</view>
					<view class="notice" style="width: 120rpx;height: 100rpx;"
						@tap="$fun.jump(`/pageC/statistics/statistics?title=${$t('home.name2')}&type=2`)">
						<image class="imgicon" src="@/static/lr/l2.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName">{{$t('home.name2')}}</view>
					</view>
					<view class="notice" style="width: 120rpx;height: 100rpx;" @tap="handleCsignInfo">
						<image class="imgicon" src="@/static/lr/l3.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName">{{$t('home.name3')}}</view>
					</view>
					<view class="notice" style="width: 120rpx;height: 100rpx;" @tap="$fun.jump('/pageC/shop/shop')">
						<image class="imgicon" src="@/static/lr/l4.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName" style="">{{$t('home.name4')}}</view>
					</view>
				</view>
				<view class="">
					<view class="notice" style="width: 120rpx;height: 100rpx;" @tap="$fun.jump('/pageA/share')">
						<image class="imgicon" src="@/static/lr/r1.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName">{{$t('home.name5')}}</view>
					</view>
					<view class="notice" style="width: 120rpx;height: 100rpx;"
						@tap="$fun.jump('/pageB/otcCenter/otcCenter')">
						<image class="imgicon" src="@/static/lr/r2.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName">{{$t('home.name6')}}</view>
					</view>
					<view class="notice" style="width: 120rpx;height: 100rpx;"
						@tap="$fun.jump(`/pageC/dataCharts/dataCharts?title=${$t('home.name7')}&type=0`)">
						<image class="imgicon" src="@/static/lr/r3.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName">{{$t('home.name7')}}</view>
					</view>
					<view class="notice" style="width: 120rpx;height: 100rpx;"
						@tap="$fun.jump(`/pageC/dataCharts/dataCharts?title=${$t('home.name8')}&type=1`)">
						<image class="imgicon" src="@/static/lr/r4.png" mode=""></image>
						<image class="imgxz" src="../../static/lr/di.png" mode=""></image>
						<image class="img" src="../../static/lr/1.png" mode=""></image>
						<!-- <image class="img" src="../../static/lr/2.png" mode=""></image> -->
						<view class="textName">{{$t('home.name8')}}</view>
					</view>
				</view>
			</view>
			<view class="hashrate1" style="background: url('/static/2(1).png') no-repeat;background-size: 100% 100%;">
				<image class="img" src="../../static/2(2).png" mode="" style=""></image>
				<view class="textName1">{{$t('home.name42')}}</view>
				<view class="num1">
					{{userInfo.totalflow ? userInfo.totalflow: 0}}
				</view>
			</view>
			<view class="hashrate">
				<view class="hashrate-item" style="background: url('/static/index/hashrate(1).png') no-repeat;background-size: 100% 100%;">
					<view class="textName">{{$t('home.name11')}}</view>
					<view class="num">
						{{ userInfo.userflow ? userInfo.userflow: 0}}
					</view>
				</view>
				<view class="hashrate-item" style="background: url('/static/index/hashrate(2).png') no-repeat;background-size: 100% 100%;">
					<view class="textName">{{$t('home.name12')}}</view>
					<view class="num">
						{{userInfo.dayflow ? userInfo.dayflow: 0 }}
					</view>
				</view>
			</view>
			<view class="hashrate1" style="background: url('/static/2(1).png') no-repeat;background-size: 100% 100%;" @click="$fun.jump(`/pageC/levelInfo/levelInfo?name=${$t('levelInfo.name')}`)" v-if="userInfo.level_id==0">
				<image class="img" src="../../static/2(2).png" mode="" style=""></image>
				<view class="textName1" style="line-height: 66rpx;">
					{{$t("levelInfo.name")}}
				</view>
			</view>
		</view>
		<!-- <view class="Coupons" @tap="handleTap">
			<image src="@/static/index/collect.png" mode="" style="height: 100%;width: 100%;"></image>
		</view> -->
		<appUpdate v-if="appUpdateShow" :update_info="update_info" @closeModel="closeModel"></appUpdate>
		<CsignIn v-if="isCsignIn" @close="closeCsign" :list="list" day="1"></CsignIn>
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import Cportrait from '@/components/c-portrait/c-portrait.vue'
	import CsignIn from '@/components/c-signIn.vue'
	import appUpdate from "@/components/yzhua006-update/app-update.vue";
	import headerTop from "@/components/dacizi-headtag/dacizi-headtag.vue"
	import {
		checkUpdate
	} from "@/components/yzhua006-update/js/app-update-check.js";
	import tips from '@/components/tui-tips/tui-tips.vue'
	export default {
		components: {
			headerTop,
			appUpdate,
			Cportrait,
			CsignIn,
			tips
		},
		data() {
			return {
				smileTiger:"@/static/json/data.json",
				tab_title: "smartbox",
				appUpdateShow: false,
				update_info: {},
				imageList: [],
				newsList: [],
				classList: [],
				product: [],
				tabList: [],
				tabIndex: 0,
				isAnimating: false,
				flag: false,
				isShow: false,
				count: 0,
				blanceList: {},
				isCsignIn: false, // 签到是否显示
				list: [],
				throttle: false,
				energyList: [
					// {
					// 	top: 250,
					// 	left: 100,
					// 	// time: 0,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 200,
					// 	left: 250,
					// 	// time: 0.2,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 100,
					// 	left: 350,
					// 	// time: 0.4,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 200,
					// 	left: 450,
					// 	// time: 0.6,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 250,
					// 	left: 550,
					// 	// time: 0.8,
					// 	// flag:false,
					// 	// isShow:true,
					// },
				],
				show:true,
				statusBarHeight:0,
				userInfo:{}
			};
		},

		onShow() {
			this.$fun.ajax.post('user/index', {}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
			
			this.getdata()
			this.$nextTick(()=>{
				this.$refs.isdata.getuser()
			})
		},
		onReady() {
			// console.log('111111122222')
			// this.showTips('res.data')
			this.getTips()
		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			uni.hideTabBar()
			// #ifdef APP-PLUS
			this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
			// #endif
			// #ifdef MP-WEIXIN
			this.$fun.ajax.post('user/gitH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					const pageUrl = res.data.split('#')[1]
					uni.setStorageSync('gitH5Qrcode', JSON.stringify(pageUrl))
				}
			})
			// #endif
			// this.isFreed()
			this.$fun.showLoading()
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
			
			// this.$fun.ajax.post('product/tips', {}).then(res => {
			// 	if (res.code == 1) {
			// 		if(res.data){
			// 			this.showTips(res.data)
			// 		}
			// 	}
			// })
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: 'smartbox',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: 'smartbox',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		mounted() {
			uni.onNetworkStatusChange(function(res) {
				console.log(res.isConnected);
				console.log(res.networkType);
			});
			
		},
		methods: {
			getdata(){
				this.$fun.ajax.post('index/index', {}).then(res => {
					// console.log(res)
					let imgList = res.data.advert
					for (var i = 0; i < imgList.length; i++) {
						imgList[i].src = this.$fun.imgUrl(imgList[i].image)
					}
					this.imageList = imgList
					this.classList = res.data.category
					// this.product = res.data.product
				})
				this.$fun.ajax.post('news/index', {}).then(res => {
					if (res.code == 1) {
						this.newsList = res.data
					}
				})
			},
			getTips(){
				this.$fun.ajax.post('product/tips', {}).then(res => {
					if (res.code == 1) {
						if(res.data){
							this.showTips(res.data)
						}
					}
				})
			},
			showTips(e) {
				let options = {
					msg: e,
					duration: 5000
				};
				//需等组件初始化完成，确认已获取到组件实例
				this.$refs.toast && this.$refs.toast.showTips(options);
			},
			async signInfo() {
				const res = await this.$fun.ajax.post('user/signInfo')
				this.list = res.data.list
			},
			// 获取签到信息
			handleCsignInfo() {
				this.signInfo()
				this.isCsignIn = true
			},
			// 关闭签到弹窗
			closeCsign(val) {
				this.isCsignIn = val
			},
			async isFreed() {
				const systemwidth = uni.getSystemInfoSync().windowWidth
				// Math.floor(Math.random() * (max - min + 1)) + min;
				const res = await this.$fun.ajax.post('butt/isFreed')
				for (let i = 0; i < res.data.count; i++) {
					this.energyList[i] = {
						top: Math.floor(Math.random() * (400 - 200 + 1)) + 200,
						left: Math.floor(Math.random() * ((systemwidth * 2 - 300) - 50 + 1)) + 50,
						times: Math.random()
					}
				}
				if (this.energyList.length) {
					this.isShow = true
				}
			},
			async handleTap() {
				this.$fun.showLoading()
				if (this.throttle) return
				this.throttle = true
				this.flag = true
				const res = await this.$fun.ajax.post('butt/freed')
				uni.hideLoading()
				if (res.code) {
					setTimeout(() => {
						this.isShow = false
						this.throttle = false
					}, 1000)
					this.$fun.msg(res.msg)
				}
			},
			changeTab(index) {
				this.tabIndex = index
				this.getShopList(this.tabList[index].id)
			},
			getShopList(id) {
				uni.showLoading({
					title: 'loading...',
					mask: true
				});
				this.$fun.ajax.post('index/type_goods', {
					type: id
				}).then(res => {
					uni.hideLoading()
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].label) {
							res.data[i].label = res.data[i].label.split(',')
						} else {
							res.data[i].label = []
						}
					}
					this.product = res.data
				})
			},
			// 获取版本更新
			getAppInfo(type) {
				const that = this
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios） 
				}
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false

				//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息

				//请求获取最新版本
				plus.runtime.getProperty(plus.runtime.appid, (result) => {
					that.$fun.ajax.post('config/version', {
						version: result.version
					}).then(res => {
						that.update_info = {
							version: res.data.version, //线上版本
							now_url: res.data.pkgUrl, //更新链接
							silent: res.data.silent, //是否是静默更新
							force: res.data.force, //是否是强制更新
							net_check: res.data.net_check, //非WIfi是否提示
							note: res.data.content, //更新内容
						}
						checkUpdate(that.update_info, type, that).then(res => {
							if (res.data) {
								that.appUpdateShow = true
							} else {
								// this.$fun.msg(res.msg)
							}
						}); ///检查更新  
						//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
						//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					})
				})

			},
			closeModel() {
				this.appUpdateShow = false
			},
			jump(url) {
				this.$fun.jump(url)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 98vh;
		background-color: #fff;
		background: url('/static/index/imgbgc.png') no-repeat;
		background-size: 100% 100%;
		height: 100%;
		overflow-y: scroll;
	}

	.container-index {
		// height: 100%;

		.image {
			position: relative;
			height: 100%;

			.logo {
				height: 100%;
				width: 100%;
			}
		}

		.textName {
			font-family: PingFang SC, PingFang SC;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #d1d1d1;
			line-height: 28rpx;
		}

		.my {
			position: absolute;
			top: 620rpx;
			left: 120rpx;

			.textName {
				color: #232323;
			}
		}

		.Notice {
			position: absolute;
			top: 250rpx;
			left: 30rpx;
		}
		.svga {
			// position: relative;
			.content {
				width: 1200rpx;
				// transform: scale(1.5);
				height: 600rpx;
				position: fixed;
				// margin-top: 55%;
				top: 30%;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
				z-index: 0;
				#animationContainer{
					// position: absolute;
					width: 678rpx;
					height: 678rpx;
					position: absolute;
					top: -30rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: -1;
					// transform: scale(1.0);
				}
				
			}
		}
		.dx{
			padding: 30rpx;
			// position: absolute;
			// top: 22%;
			// height: 100%;
			// margin-top: 54%;
			width: 100%;
			position: absolute;
			top: 23%;
			padding-bottom: 100rpx;
			.notice{
				position: relative;
				margin-bottom: 60rpx;
			}
		}
		.dx .imgxz{
			width: 95%;
			height: 100%;
			position: absolute;
			left: 0;
			top: -20rpx;
			animation: spin1 5s linear infinite;
			@keyframes spin1 {
			 from {  
				transform: rotate(0deg);  
			  }  
			  to {  
				transform: rotate(360deg);  
			  }  
			}
		}
		.dx {
			.textName{
				// line-height: 60rpx;
				margin-top: 14rpx;
			}
			.img{
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				left: 18rpx;
				top: -10rpx;
			}
		}
		.dx .imgicon{
			width: 40rpx;
			height: 40rpx;
			z-index: 1;
			margin: 10rpx auto;
			left: -2rpx;
			margin-left: 40rpx;
		}
		.svga .img1,.svga .img2,.dx .img{
			 animation: spin 5s linear infinite;
			 z-index: 0;
			 @keyframes spin {
				0%{
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.1;
				}
				15% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.35;
				 }
				25% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.55;
				 }
				 35% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.75;
				  }
				50% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.9;
		
				 }
				 65% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.75;
				  }
				75% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.55;
		
				}
				85% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.35;
				 }
				100% {
					// transform: matrix(1, 0, 0, 1, 272, 272);
					opacity: 0.15;
				}
			 }
		}
		.Notice1 {
			position: absolute;
			top: 420rpx;
			left: 30rpx;
		}

		.Notice2 {
			position: absolute;
			top: 570rpx;
			left: 30rpx;
		}

		.Notice3 {
			position: absolute;
			top: 730rpx;
			left: 30rpx;
		}

		.pulse {
			position: absolute;
			top: 250rpx;
			right: 30rpx;
		}

		.pulse1 {
			position: absolute;
			top: 420rpx;
			right: 30rpx;
		}

		.pulse2 {
			position: absolute;
			top: 570rpx;
			right: 30rpx;
		}

		.pulse3 {
			position: absolute;
			top: 720rpx;
			right: 30rpx;
		}
		.Notice,.Notice1,.Notice2,.Notice3,.pulse,.pulse1,.pulse2,.pulse3{
			text-align: center;
		}
		.hashrate1{
			width: 344rpx;
			height: 120rpx;
			position: relative;
			margin: 0 auto;
			// top:40%;
			// display: flex;
			// justify-content: space-between;
			padding: 10rpx 30rpx;
			// left: 50%;
			// transform: translateX(-50%);
			text-align: center;
			.img{
				width: 90%;
				height: 20rpx;
				margin-top: 60rpx;
			}
			.textName1{
				color: #FFFFFF;
				font-size: 24rpx;
				margin: 16rpx auto 0;
				// display: flex;
				// align-items: center;
			}
			.num1{
				color: #FFFFFF;
			}
		}
		.hashrate{
			width: 100%;
			// position: absolute;
			top: 50%;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			// text-align: center;
			.hashrate-item{
				width: 310rpx;
				height: 116rpx;
				padding: 20rpx 0;
				position: relative;
				.num{
					// width: 80%;
					font-family: DIN, DIN;
					font-weight: 500;
					// font-size: 40rpx;
					color: #FFFFFF;
					line-height: 47rpx;
					position: absolute;
					left: 106rpx;
				}
				.textName{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					line-height: 28rpx;
				}
			}
			
		}

		.device {
			position: absolute;
			top: 500rpx;
			right: 15rpx;
		}

		.Coupons {
			position: absolute;
			top: 75%;
			left: 50%;
			right: 0;
			transform: translateX(-50%);
			width: 360rpx;
			height: 100rpx;
		}

		.balance {
			position: absolute;
			top: 620rpx;
			right: 120rpx;

			.textName {
				color: #232323;
			}
		}

		.bottom {
			position: absolute;
			top: 750rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 60rpx;
			text-align: center;

			.bottom-item {
				width: 33%;
				height: 90rpx;

				.num {
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 40rpx;
					color: #232323;
					line-height: 47rpx;
				}

				.textName {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #232323;
					line-height: 28rpx;
				}
			}
		}

		.energyItme {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			top: 200rpx;
			left: 200rpx;
			animation: identifier 3s linear infinite;
			// transition: all 2s;
		}

		.animate {
			animation: exampleAnimation 1s linear;
		}

		@keyframes exampleAnimation {
			0% {
				opacity: 1;
				transform: translateY(10rpx);
			}

			100% {
				opacity: 0;
				transform: translate(-50%, 400rpx);
				left: 50%;
			}
		}

		@keyframes identifier {
			0% {
				transform: translateY(0rpx);
			}

			50% {
				transform: translateY(30rpx);
			}

			100% {
				transform: translateY(0rpx);
			}
		}
	}

	.content-top {
		padding: 20rpx;
		margin: 0 0 30rpx;
		height: 300rpx;
	}

	.inform {
		margin: 40rpx 20rpx 20rpx;

		.inform-info {
			display: flex;
			padding: 0 20rpx;
			height: 50rpx;
			background: #e0eefe;
			border-radius: 30rpx;

			.picture {
				display: flex;
				align-items: center;
				margin-right: 12rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.info {
				width: 80%;
				height: 100%;

				.swiper {
					width: 100%;
					height: 100%;

					.swiper-item {
						display: flex;
						align-items: center;
						width: 100%;
						height: 100%;

						text {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}

	.shopBox {
		.tabLists {
			background: #FFFFFF;
			display: flex;
			height: 80rpx;
			align-items: center;
			justify-content: space-around;

			.tabItem {
				height: 100%;
				color: #888888;
				font-size: 28rpx;
				line-height: 80rpx;
				border-bottom: 4rpx solid transparent;
			}

			.active {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom: 10rpx solid #1E84F1;
			}
		}

		.shopList {
			padding: 32rpx;
			background: #f5f9ff;

			.shopItem {
				padding: 15rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 24rpx;

				.shopInfo {
					display: flex;
					align-items: center;

					image {
						width: 172rpx;
						height: 172rpx;
					}

					.info {
						padding: 10rpx;
						width: 100%;
					}

					.title {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}

					.title1 {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #888888;
					}

					.money {
						color: #ff3456;

						text {
							font-size: 44rpx;
						}
					}

					.tagBox {
						margin-top: 35rpx;
						display: flex;
						flex-wrap: wrap;

						.tag {
							padding: 6rpx 14rpx;
							color: #1e84f1;
							border: 2rpx solid #1e84f1;
							border-radius: 4rpx;
							font-size: 20rpx;
							margin-right: 10rpx;

						}
					}
				}

				.btn {
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					background-color: #1E84F1;
					color: #fff;
					margin: 10rpx 0;
				}
			}
		}
	}
</style>